<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看所有文章</title>
    <link type="text/css" rel="stylesheet" href="./layui/css/layui.css"/>
    <style rel="stylesheet" type="text/css">
        .right{
            margin-right: 5px;
            text-align: center;
        }
    </style>
    <script>
        window.onload=function () {
            window.setInterval('showRealTime()',1000);
        }
    </script>
</head>
<body class="layui-layout-body">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查看所有文章</legend>
</fieldset>


    <div class="layui-body" style="left: 13px;margin-top: 68px;">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="right">
                <table class="layui-hide" id="test" lay-filter="demo"></table>
                <script type="text/html" id="barDemo">
                </script>
            </div>
        </div>
    </div>



<script src="./layui/layui.all.js"></script>
<script>
    layui.use(['laypage','table', 'element'], function () {
        var laypage = layui.laypage //分页
            , table = layui.table //表格
            , element = layui.element; //元素操作
        table.render({
            elem: '#test'
            , height: 500
            , url: '/selectallcontent.action' //数据接口
            , page: true //开启分页

            , cols: [[ //表头
                {field: 'aid', title: 'ID', width: 80, sort: false, fixed: 'left'}
                , {field: 'uid', title: '用户名ID', width: 120}
                , {field: 'title', title: '标题', width: 150, sort: false}
                , {field: 'content', title: '正文', width: 200, sort: false}
                , {field: 'tag', title: '标记', width: 80, sort: false}
                , {field: 'publishDate', title: '发布时间', width: 240, sort: false}
                , {field: 'sendstate', title: '未发送', width: 120, sort: false}
            ]]
        });
        //监听工具条
        table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.open({
                    title: '查看草稿'
                    ,content: '<div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">标题</label>\n' +
                    '        <div class="layui-input-block">\n' +
//                          '            <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" style="width: auto">\n' +
                    '        <label class="layui-form-label">'+(JSON.parse(JSON.stringify(data)))['title']+'</label>\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '    <div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">发布时间</label>\n' +
                    '        <div class="layui-input-block">\n' +
                    '        <label class="layui-form-label">'+(JSON.parse(JSON.stringify(data)))['publishDate']+'</label>\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '    <div class="layui-form-item layui-form-text">\n' +
                    '        <label class="layui-form-label">文章内容</label>\n' +
                    '        <div class="layui-input-block">\n' +
                    '            <textarea name="desc" placeholder="请输入内容" class="layui-textarea" style="width: auto">'+(JSON.parse(JSON.stringify(data)))['content']+'</textarea>\n' +
                    '        </div>\n' +
                    '    </div>\n'
                });
            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(draft);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') {
                layer.msg('编辑操作');
            }
        });
        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            , count: 100 //总页数
            , skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            , jump: function (obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页');
                }
            }
        });
    });
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });
</script>
</body>
</html>